<template>
  <div class="orgManage">
    <FormBlock :title="title" direction="column" class="left-area">
      <org-tree ref="orgTree" :comp="comp" :dcPeriod="dcPeriod" @infoConfig="getInfoConfig" @addInfo="getAddInfo"></org-tree>
    </FormBlock>
    <FormBlock :title="editAreaTitle" direction="column">
      <tree-info :comp="comp" :dcPeriod="dcPeriod" :infoConfig="infoConfig" :addInfo="addInfo" @setAreaTitle="setAreaTitle" @close="close" @infoChanged="infoChanged"></tree-info>
    </FormBlock>
  </div>
</template>

<script>
import orgTree from './orgTree.vue'
import treeInfo from './treeInfo.vue';
export default {
  components: { treeInfo, orgTree },
  data() {
    return {
      editAreaTitle: '组织信息',
      infoConfig: {},
      addInfo: {}
    }
  },
  props: {
    title: {
      type: String,
      default: '组织管理'
    },
    comp: {
      type: String,
      default: 'orgManage'
    },
    dcPeriod: {
      type: String,
      default: ''
    },
    changeFunc: {
      type: Function,
      default: ()=>{}
    },
  },
  methods: {
    getInfoConfig(data) {
      this.editAreaTitle = data.editAreaTitle,
      this.infoConfig = data
    },
    getAddInfo(data) {
      this.addInfo = data
    },
    setAreaTitle(data) {
      this.editAreaTitle = data
    },
    close() {
      this.$refs.orgTree.onClear()
    },
    infoChanged(info){
      this.changeFunc(info)
    }
  }
}
</script>

<style lang="less" scoped>
.form-block {
  .block-body {
    width: calc(~"100% - 1px");
    .ivu-tree {
      height: calc(~"100% - 36px");
    }
  }
}
.orgManage {
  height: 100%;
  .left-area {
    width: 28%;
    overflow-x: hidden;
    height: calc(~"100% - 80px");
    float: left;
  }
}
</style>

